{% extends "base.html" %}

{% block title %}注册 - VXBattle{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="game-container p-4">
            <div class="text-center mb-4">
                <i class="fas fa-user-plus fa-3x text-primary mb-3"></i>
                <h2 class="text-primary">用户注册</h2>
                <p class="text-muted">创建您的VXBattle账号</p>
            </div>

            <form id="registerForm">
                <div class="mb-3">
                    <label for="username" class="form-label">
                        <i class="fas fa-user me-1"></i>用户名
                    </label>
                    <input type="text" class="form-control" id="username" name="username" required 
                           minlength="3" maxlength="20" pattern="[a-zA-Z0-9_]+">
                    <div class="form-text">3-20个字符，只能包含字母、数字和下划线</div>
                </div>

                <div class="mb-3">
                    <label for="email" class="form-label">
                        <i class="fas fa-envelope me-1"></i>邮箱 (可选)
                    </label>
                    <input type="email" class="form-control" id="email" name="email">
                    <div class="form-text">用于找回密码和接收游戏通知</div>
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">
                        <i class="fas fa-lock me-1"></i>密码
                    </label>
                    <input type="password" class="form-control" id="password" name="password" required 
                           minlength="6" maxlength="50">
                    <div class="form-text">至少6个字符</div>
                </div>

                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">
                        <i class="fas fa-lock me-1"></i>确认密码
                    </label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                    <div class="invalid-feedback" id="passwordMismatch">
                        两次输入的密码不一致
                    </div>
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="agreeTerms" required>
                    <label class="form-check-label" for="agreeTerms">
                        我同意 <a href="#" class="text-decoration-none">用户协议</a> 和 <a href="#" class="text-decoration-none">隐私政策</a>
                    </label>
                </div>

                <div class="d-grid mb-3">
                    <button type="submit" class="btn btn-primary" id="registerBtn">
                        <i class="fas fa-user-plus me-2"></i>注册
                    </button>
                </div>

                <div class="text-center">
                    <p class="mb-0">已有账号？ 
                        <a href="{{ url_for('login') }}" class="text-decoration-none">
                            立即登录
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 密码确认验证
function validatePassword() {
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const confirmInput = document.getElementById('confirmPassword');
    const mismatchDiv = document.getElementById('passwordMismatch');
    
    if (confirmPassword && password !== confirmPassword) {
        confirmInput.classList.add('is-invalid');
        mismatchDiv.style.display = 'block';
        return false;
    } else {
        confirmInput.classList.remove('is-invalid');
        mismatchDiv.style.display = 'none';
        return true;
    }
}

// 实时验证密码
document.getElementById('confirmPassword').addEventListener('input', validatePassword);
document.getElementById('password').addEventListener('input', function() {
    const confirmPassword = document.getElementById('confirmPassword').value;
    if (confirmPassword) {
        validatePassword();
    }
});

// 表单提交
document.getElementById('registerForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // 验证密码
    if (!validatePassword()) {
        showToast('两次输入的密码不一致', 'error');
        return;
    }
    
    const registerBtn = document.getElementById('registerBtn');
    const originalText = registerBtn.innerHTML;
    
    // 显示加载状态
    registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>注册中...';
    registerBtn.disabled = true;
    
    try {
        const formData = new FormData(this);
        const data = {
            username: formData.get('username'),
            email: formData.get('email'),
            password: formData.get('password')
        };
        
        const response = await apiRequest('/register', 'POST', data);
        
        if (response.success) {
            showToast(response.message, 'success');
            // 延迟跳转到登录页面
            setTimeout(() => {
                window.location.href = '/login';
            }, 2000);
        } else {
            showToast(response.message, 'error');
        }
    } catch (error) {
        showToast('注册失败，请稍后重试', 'error');
    } finally {
        // 恢复按钮状态
        registerBtn.innerHTML = originalText;
        registerBtn.disabled = false;
    }
});

// 用户名验证
document.getElementById('username').addEventListener('input', function() {
    const username = this.value;
    const pattern = /^[a-zA-Z0-9_]+$/;
    
    if (username && !pattern.test(username)) {
        this.classList.add('is-invalid');
    } else {
        this.classList.remove('is-invalid');
    }
});
</script>
{% endblock %}